// 中部主页显示部分
<template>
    <div class="user-header">
        <el-button type="primary" @click="handleAdd">+新增</el-button>
        <el-form :inline="true" :model="formInline">

    <el-form-item label="请输入">
      <el-input v-model="formInline.keyword" placeholder="请输入用户名" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="handleSerch">搜索</el-button>
    </el-form-item>
  </el-form>
    </div>

        <div class="table">
    <el-table :data="list" style="width: 100%" height="500px">
      <el-table-column
        v-for="item in tableLabel"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        :width="item.width ? item.width : 125"
      />
      <el-table-column fixed="right" label="操作" min-width="180">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" size="small" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
    small
    background
    layout="prev, pager, next"
    :total="config.total"
    @current-change="changePage"
    class="pager mt-4"
  />


  </div>
  <el-dialog
    v-model="dialogVisible"
    :title="action =='add'?'新增用户':'编辑用户'"
    width="30%"
    :before-close="handleClose"
  >
  <!-- 弹出的用户编辑的表单 -->
  <el-form :inline="true" :model="formUser" ref="userForm">

   <el-row>
    <el-col :span="12">
    <el-form-item 
    label="姓名" 
    prop="name"
    :rules="[{required:true,message:'姓名是必填项'}]"
    >
      <el-input v-model="formUser.name" placeholder="请输入姓名" />
    </el-form-item>
     </el-col>
<el-col :span="12">
    <el-form-item label="年龄"
     prop="age"
     :rules="[
     {required:true,message:'年龄是必填项'},
     {type:'number',message:'必须是数字'},
    ]"
     >
      <el-input v-model.number="formUser.name" placeholder="请输入年龄" />
    </el-form-item>
</el-col>
</el-row>

<el-row>
    <el-col :span="12">
    <el-form-item label="性别" prop="sex"
    :rules="[{required:true,message:'性别是必填项'}]"
    >
        <el-select v-model="formUser.sex" placeholder="请选吧">
        <el-option label="女" value="0" />
        <el-option label="男" value="1" />
      </el-select>
    </el-form-item>
     </el-col>
<el-col :span="12">
    <el-form-item label="出生日期" prop="birth"  :rules="[{required:true,
      message:'出生日期是必填项'}]">
        <el-date-picker
              v-model="formUser.birth"
              type="date"
              label="出生日期"
              placeholder="请输入"
              style="width: 100%"
            />
    </el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="地址" prop="addr"
:rules="[{required:true,message:'地址是必填项'}]"
>
      <el-input v-model="formUser.addr" placeholder="请输入地址" />
    </el-form-item>
</el-row>
<el-row style="justify-content:flex-end">
    <el-form-item>
      <el-button type="primary" @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </el-form-item>
</el-row>
  </el-form>
    <!-- <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确定</el-button
        >
      </span>
    </template> -->
  </el-dialog>
</template>

<script>
import { ElMessage, ElMessageBox } from "element-plus";
import { defineComponent,getCurrentInstance,onMounted,ref,reactive} from "vue";
export default defineComponent({
    setup() {
        const { proxy } = getCurrentInstance();
        const list=ref([]);

        const tableLabel = reactive([
      {
        prop: "name",
        label: "姓名",
      },
      {
        prop: "age",
        label: "年龄",
      },
      {
        prop: "sexLabel",
        label: "性别",
      },
      {
        prop: "birth",
        label: "出生日期",
        width: 200,
      },
      {
        prop: "addr",
        label: "地址",
        width: 320,
      },
    ]);
        onMounted(()=>{
            getUserData(config);
        });
        const config =reactive({
            total:0,
            page:1,
            name:''
        })

        const getUserData = async (config) => {
            let res = await proxy.$api.getUserData(config);
            config.total=res.count
            // console.log(res);
            list.value=res.list.map((item)=>{
                item.sexLabel=item.sex===0?"女":"男";
                return item;
            })

            // console.log(res);
            list.value=res.list;
        };
        const changePage=(page)=>{
            // console.log(page);
            config.page=page;
            getUserData(config);
        }
        const formInline=reactive({
            keyword:"",
        })
        // 向后端传送搜索框参数
        const handleSerch=()=>{
            config.name=formInline.keyword;
            getUserData(config);
        }

        // 控制输入框的显示或者隐藏
        const dialogVisible=ref(false);
        const handleClose = (done)=> {
        ElMessageBox.confirm('您真的要关这个?')
    .then(() => {
      proxy.$refs.userForm.resetFields();
      done()
    })
    .catch(() => {
      // catch error
    })
}
// 添加用户的form数据
const formUser=reactive({
    name:"",
    age:"",
    sex:"",
    birth:"",
    addr:"",

});
// 用户添加数据当中的日期标准化处理
const timeFormat=(time)=>{
  var time =new Date(time);
  var year=time.getFullYear();
  var month=time.getMonth()+1;
  var date=time.getDate();
  function add(m){
    return m<10?"0"+m:m;
  }
  return year+"-"+add(month)+"-"+add(date);
}
// 添加用户
   // 添加用户
   const onSubmit = () => {
      proxy.$refs.userForm.validate(async (valid) => {
        if (valid) {
          if(action.value=='add'){
            formUser.birth = timeFormat(formUser.birth);
            let res = await proxy.$api.addUser(formUser);
            if (res) {
              // console.log(proxy.$refs);
              dialogVisible.value = false;
              proxy.$refs.userForm.resetFields();
              getUserData(config);
            
          }
          }
          else{
            // 编辑的接口
            formUser.sex=='男'?(formUser.sex=1):(formUser.sex=0);
            let res = await proxy.$api.editUser(formUser);
            if (res) {
              // console.log(proxy.$refs);
              dialogVisible.value = false;
              proxy.$refs.userForm.resetFields();
              getUserData(config);
            
          }
            console.log(formUser);
          } 
        }else{
          ElMessage({
            showClose:true,
            message:"请输入正确的内容",
            type:"error"
          })
        }
          });

};
// 取消事后消除编辑栏提示功能
const handleCancel=()=>{
  dialogVisible.value=false;
  proxy.$refs.userForm.resetFields();
  
};
// 区分编辑和新增
const action=ref('add')
// 编辑用户
const handleEdit=(row)=>{
  console.log(row);

 
  action.value="edit";
  dialogVisible.value=true;
  row.sex==1?(row.sex="男"):(row.sex='女')
    // 浅拷贝
  Object.assign(formUser,row)

};
// 新增用户
const handleAdd=()=>{
  action.value="add";
  dialogVisible.value=true;

}
// 删除用户
const handleDelete =(row)=>{
  ElMessageBox.confirm("确定删除啊？")
  .then(async()=>{
    await proxy.$api.deleteUser({
      id:row.id
    })
    ElMessage({
      showClose:true,
      message:'删除成功',
      type:"success"
    });
    getUserData(config);
  })
  .catch(()=>{

  })

}
        return{
            list,
            tableLabel,
            config,
            changePage,
            formInline,
            handleSerch,
            dialogVisible,
            handleClose,
            formUser,
            onSubmit,
            handleCancel,
            action,
            handleEdit,
            handleAdd,
            handleDelete
        };
        
    },
});
</script>

<style lang="less" scoped>
.table{
    position: relative;
    height: 520px;
    .pager{
        position: absolute;
        right: 0;
        bottom:-20px
    }
}
.user-header{
    display: flex;
    justify-content: space-between;
}
</style>
